<template>
	<view class="flex-col page">
		<view class="flex-col justify-start flex-auto group_2">
			<view class="flex-col">
				<view class="section uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem"
						styleType="text" activeColor="#008B8B"></uni-segmented-control>
				</view>

				<view class="content">
					<view class=" group_3" v-show="current === 0">
					  <hr class="top-divider">
					  <view class="flex-col items-start group_4 ">
					    <view v-for="(item,index) in roomList" :key="index" class="list-item" @click="clicklistitem1(item)" style="width: 100%;">
					      <view class="item-wrapper" style="width: 100%;">
					        <image class="thumbnail" src="../../static/images/room.png"></image>
					        <view class="text">
					          <view class="title">{{item.name}}</view>
							  <view v-if="item.owner!=null" class="note">{{sharedNum}}共享</view>
					        </view>
					      </view>
						  <hr class="divider">
					    </view>
					  </view>
					</view>

					<view  v-if="sharedRoomlist.length===0&&sharedRoomlist1.length===0" class="flex-row justify-between items-center section_3" v-show="current === 1">
						<view class="flex-col items-center flex-auto group_12">
							<image class="image_6" src="../../static/images/3df4f07884a8ad9ee9c75f6b2f977539.png" /> 
							<text class="font_12 text_15">没有收到共享实验室的邀请</text>
						</view>
					</view>
					
					<view  v-else class="flex-row justify-between items-center section_3" v-show="current === 1">
						<uni-swipe-action>
							<uni-swipe-action-item v-for="(items, index) in sharedRoomlist" :key="index"
								:right-options="options" @click="(action) => onClick(index, action)"
								@change="swipeChange()">
								<view class="full-width-divider">
									<uni-list class="font_3">
										<uni-list-item class="list-item-title" ellipsis="1" :title="getTitleText(items)">
										</uni-list-item>
									</uni-list>
								</view>
							</uni-swipe-action-item>
							
							<uni-swipe-action-item v-for="(items1, ind) in sharedRoomlist1" :key="ind"
									:right-options="options" @click="(action) => onClick1(ind, action)"
									@change="swipeChange()">
									<view class="full-width-divider">
										<uni-list class="font_3">
											<uni-list-item class="list-item-title" ellipsis="1" :title="getTitleText(items1)">
											</uni-list-item>
										</uni-list>
									</view>
							</uni-swipe-action-item>
						</uni-swipe-action>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniList from "@/uni_modules/uni-list/components/uni-list/uni-list.vue"
	import uniListItem from "@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue"

	//查询用户账号user(实验室使用者)实验室
	import { _laboInfo } from '@/service/laborroom.js'
	//根据账号查询被共享的实验室
	import { _getSharedLabInfo } from '@/service/laborroom.js'
	//接受共享实验室邀请
	import { _acceptSharedLab } from '@/service/laborroom.js'
	//查询收到的邀请共享实验室
	import { _searchReceivedSharedLab } from '@/service/laborroom.js'
	//拒绝共享实验室
	import { _refuseSharedLab } from '@/service/laborroom.js'
	//根据实验室名称和实验室拥有者查询共享人数
	import { _searchLabSharedNum } from '@/service/laborroom.js'
	
	//获取实验室信息
	import {_labomanage} from "@/service/user.js"
	import {
		rejects
	} from 'assert';
	import {
		access
	} from 'fs';
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				account: '',
				items: [
		 		'共享',
					'接受',
				],
				current: 0,
				roomList: [],
		 	sharedRoomlist: [],
			sharedRoomlist1: [],
				options: [{
					text: '拒绝',
					style: {
						backgroundColor: '#dd524d'
					},
					action: 'reject' // 添加一个拒绝操作的标识
				}, {
					text: '接受',
					style: {
						backgroundColor: '#5F9EA0'
					},
					action: 'accept' // 添加一个接受操作的标识
				}],

				serialnum: '',
				listindex: null, //接受页面点击时列表的下标
				phoneaccount: '',

				socketTask: null,
				// 确保websocket是打开状态
				is_open_socket: false,

				status: '',
				
				laboManage:[],
				name:'',
				owner:'',
				sharedNum:''
			};
		},


		onLoad() {
			try {
				const value = uni.getStorageSync('userInfo');
				console.log(value)
				if (value != null) {
					this.account = value.accountNum
					console.log(this.account)
				}
			} catch (e) {
				console.error(e);
			}
			this.init(); //共享页面的渲染
			this.allSharedLabInfo(); //接受页面的渲染
			this.allSharedLabInfo1(); //接受页面的渲染
			
			this.LabInfo();
		},

		created() {
			// this.connectSocketInit()

		},
		methods: {
			async LabInfo(){
				let data={
					user:this.account
				}
				let res=await _labomanage(data)
				console.log(res.data)
				this.laboManage=res.data
				// for(let i=0;i<this.laboManage.length;i++){
					this.name=this.laboManage[0].name
					this.owner=this.laboManage[0].owner
					console.log(this.name+'+'+this.owner)
				// }
				
				this.searchLabSharedNum();
			},
			// 跳转链接
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			async init() {
				let data = {
					user: this.account
				}
				let res = await _laboInfo(data);
				this.roomList = res.data;
				console.log(this.roomList); //打印出信息

			},
			clicklistitem1(data) {
				console.log(data);
				uni.setStorage({
					key: 'sharingroom1',
					data: data
				});
				if(data.owner!=null){
					this.navTo('/pages/sharingroom1/sharingroom1')
				}else{
					this.$api.msg('只能对自己绑定的实验室进行操作！')
				}
				
			},

			//渲染接受界面
			async allSharedLabInfo() {
				let data = {
					receiver:this.account,
					type:'invite',
					isRead: '0'
				}
				let res = await _searchReceivedSharedLab(data);
				this.sharedRoomlist = res.data;
				console.log(this.sharedRoomlist);
			},
			async allSharedLabInfo1() {
				let data = {
					receiver:this.account,
					type:'invite',
					isRead:'1'
				}
				let res = await _searchReceivedSharedLab(data);
				this.sharedRoomlist1 = res.data;
				console.log(this.sharedRoomlist1);
			},

			//接受界面拒绝或同意邀请
			async onClick(index, action) {
				this.listindex = index
				console.log(this.listindex)
				console.log(action.content.action)

				if (action.content.action == 'accept') {
					let data = {
						id:this.sharedRoomlist[this.listindex].id,
						owner: this.sharedRoomlist[this.listindex].owner,
						user:this.sharedRoomlist[this.listindex].user,
						name:this.sharedRoomlist[this.listindex].name
					}
					let res = await _acceptSharedLab(data);
	
					if (res.flag = true) {
						this.$api.msg('已接受！');
						// 更新界面数据，从列表中删除该项
						this.sharedRoomlist.splice(this.listindex, 1);
						this.sharedRoomlist1.splice(this.listindex, 1);
					}
					console.log(res);
					
				} else if (action.content.action == 'reject') {
					let data = {
						id:this.sharedRoomlist[this.listindex].id,
						owner: this.sharedRoomlist[this.listindex].owner,
						user: this.sharedRoomlist[this.listindex].user,
						name:this.sharedRoomlist[this.listindex].name
					}
					let res = await _refuseSharedLab(data);
					if (res.flag == true) {
						this.$api.msg('已拒绝！');
						// 更新界面数据，从列表中删除该项
						this.sharedRoomlist.splice(this.listindex, 1);
						this.sharedRoomlist1.splice(this.listindex, 1);
					}
					console.log(res);
				}
			},
			
			async onClick1(index, action) {
				this.listindex = index
				console.log(this.listindex)
				console.log(action.content.action)
			
				if (action.content.action == 'accept') {
					let data = {
						id:this.sharedRoomlist1[this.listindex].id,
						owner: this.sharedRoomlist1[this.listindex].owner,
						user:this.sharedRoomlist1[this.listindex].user,
						name:this.sharedRoomlist1[this.listindex].name
					}
					let res = await _acceptSharedLab(data);
				
					if (res.flag = true) {
						this.$api.msg('已接受！');
						// 更新界面数据，从列表中删除该项
						this.sharedRoomlist1.splice(this.listindex, 1);
					}
					console.log(res);
					
				} else if (action.content.action == 'reject') {
					let data = {
						id:this.sharedRoomlist1[this.listindex].id,
						owner: this.sharedRoomlist1[this.listindex].owner,
						user: this.sharedRoomlist1[this.listindex].user,
						name:this.sharedRoomlist1[this.listindex].name
					}
					let res = await _refuseSharedLab(data);
					if (res.flag == true) {
						this.$api.msg('已拒绝！');
						// 更新界面数据，从列表中删除该项
						this.sharedRoomlist1.splice(this.listindex, 1);
					}
					console.log(res);
				}
			},
			swipeChange(e) {

			},

			getTitleText(item) {
				// 根据列表项的类型返回对应的标题文本
				// console.log(item); // 检查 item 的属性和值
				return "账号*******" + item.sender.slice(7) + "的用户邀请您共享实验室：" + item.name;
			},
			
			//查询实验室被共享给了几个人
			async searchLabSharedNum(){
				let data={
					name:this.name,
					owner:this.owner
				}
				let res=await _searchLabSharedNum(data)
				if(res.flag){
					console.log(res.data)
					this.sharedNum=res.data
				}
			}
		},
	};
</script>

<style scoped lang="scss">
	.full-width-divider {
		width: 100%;
	}

	.full-width-divider>>>.uni-list-item:after {
		content: "";
		display: block;
		height: 1px;
		width: calc(100% - 24px);
		margin: 0 12px;
		background-color: #ccc;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group_2 {
			height: 1177.08rpx;
			overflow-y: auto;

			.section {
				padding: 10.33rpx 0 10rpx;
				background-color: #e5e5e540;

				.text_5 {
					color: #138f87;
					font-size: 31.25rpx;
					font-family: SourceHanSansCN;
					line-height: 29.17rpx;
				}

				.image_133 {
					width: 40%;
					height: 250rpx;
				}

				.text_6 {
					margin-right: 258.33rpx;
					font-weight: unset;
					margin-bottom: 10rpx;
				}
			}

			.space-x-24-reverse {

				&>view:not(:last-child),
				&>text:not(:last-child),
				&>image:not(:last-child) {
				}
			}

			.group_3 {
				// padding: 54.17rpx 0 722.92rpx;
				padding: 54.17rpx 0 0;
				
				.group_4 {
					padding: 33.33rpx 50.83rpx;
					width: 100%;
					.text_7 {
						line-height: 30.21rpx;
					}

					.text_8 {
						margin-left: 8.33rpx;
						line-height: 19.79rpx;
					}
				}

				.image_7 {
		 		width: 27.08rpx;
					height: 27.08rpx;
				}

				.image_5 {
					border-radius: 50%;
					width: 156.25rpx;
					height: 152.08rpx;
					margin-left: 550rpx;
		 		margin-top: 20rpx;
		 	}

				.space-y-20 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 41.67rpx;
					}
				}

				.section_2 {
					padding: 33.33rpx 170.83rpx 25rpx;
					background-color: #e5e5e533;

					.text_9 {
						line-height: 30.21rpx;
					}

					.text_10 {
						line-height: 19.79rpx;
					}
				}

				.space-y-24 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 50rpx;
					}
				}

				.font_3 {
					font-size: 20.83rpx;
					font-family: SourceHanSansCN;
					line-height: 18.75rpx;
					color: #808080;
				}
			}

			.font_2 {
				font-size: 30rpx;
				font-family: SourceHanSansCN;
				line-height: 29.17rpx;
				font-weight: 700;
				color: #000000;
			}
		}

		.section_3 {
			padding: 30.5rpx 8.33rpx 62.5rpx 29.17rpx;
			// background-color: #e5e5e533;
			margin-top: 30rpx;
			line-height: 80rpx;

			.space-x-14 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 29.17rpx;
				}

				.font_3 {
					width: 100%;
					/* 设置宽度为100% */
				}

				.font_1 {
					font-size: 25rpx;
					font-family: SourceHanSansCN;
					line-height: 25rpx;
				}

				.text_6 {
					color: #138f87;
					font-size: 27.08rpx;
				}

				.text_7 {
					color: #383838;
					font-size: 27.08rpx;
				}
			}
		}

	}
	.thumbnail{
		height: 55rpx;
		width: 55rpx;
	}
	.item-wrapper {
	  display: flex;
	  align-items: center;
	}
	.top-divider,.bottom-divider {
	  height: 0.1px;
	  background-color: #ccc;
	  margin-left: 5%;
	  opacity: 0.15;
	  width: 90%;
	  margin-bottom: -1%;
	}
	
	.text{
	  margin-left: 6%;
	}
	.title{
	  font-size: 28rpx;
	}
	.note{
	  font-size: 16rpx;
	  color: #a6a6a6;
	}
	.list-item {
	  padding-bottom: 1px;
	}
	
	.divider {
	  width: 105%;
	  margin-left: -2%;
	  margin-top: 3%;
	  height: 0.1px;
	  background-color: #ccc;
	  opacity: 0.15;
	  margin-bottom: 3%;
	}

	.group_12{
		padding: 329.17rpx 0 333.33rpx;
		overflow-y: auto;
		.image_6 {
		  width: 154.17rpx;
		  height: 147.92rpx;
		}
		.text_15 {
		  color: #a6a6a6;
		}
	}
	.font_12 {
	  font-size: 31.25rpx;
	  font-family: SourceHanSansCN;
	  line-height: 29.17rpx;
	}
	
	.list-item-title {
	  width: calc(100% - 20px); /* 根据实际情况调整 */
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}


</style>
